<template>
  <n-card
    title="个人信息"
    size="small"
    :segmented="{ content: true, footer: 'soft' }"
    content-style="display: flex; flex-direction: column; align-items: center;"
  >
    <n-avatar
      round
      :size="100"
      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
    ></n-avatar>
    <n-divider />
    <n-table :bordered="false" size="small">
      <tbody>
        <tr>
          <td>账号</td>
          <td>{{ user.username }}</td>
        </tr>
        <tr>
          <td>昵称</td>
          <td>{{ user.nickname }}</td>
        </tr>
        <tr>
          <td>性别</td>
          <td>{{ codeStore.getName(_Dict.Gender, user.gender) }}</td>
        </tr>
        <tr>
          <td>出生日期</td>
          <td>{{ user.birthday }}</td>
        </tr>
        <tr>
          <td>手机</td>
          <td>{{ user.phone }}</td>
        </tr>
        <tr>
          <td>邮箱</td>
          <td>{{ user.email }}</td>
        </tr>
        <tr>
          <td>创建人</td>
          <td>{{ user.creator }}</td>
        </tr>
        <tr>
          <td>创建日期</td>
          <td>{{ formatDate(user.createTime) }}</td>
        </tr>
        <tr>
          <td>修改人</td>
          <td>{{ user.modifier }}</td>
        </tr>
        <tr>
          <td>修改日期</td>
          <td>{{ formatDate(user.modifyTime) }}</td>
        </tr>
      </tbody>
    </n-table>
  </n-card>
</template>
<script lang="ts" setup>
import { formatDate } from '@/utils/utils'

const userStore = useUserStore()
const codeStore = useCodeStore()

let user = ref(userStore.userInfo)

watch(
  () => userStore.userInfo,
  (userInfo) => {
    user.value = reactive(userInfo)
  }
)
</script>
<style scoped>
tr > td:nth-child(2) {
  text-align: right;
}

.n-divider {
  margin: 12px 0 0 0;
}
</style>
